<script>
    import BaseMessage from '@c/BaseMessage/BaseMessage'
    import BaseLeisure from '@c/BaseLeisure/BaseLeisure'
    import {shopcarlist} from './shopcar'
    import BaseCheckBox from '@c/BaseCheckBox/BaseCheckBox'
    export default {
        data() {
            return {
                shopcarlist,
                showmessage: false,
                mymessage: '',
                LeisureInfo: {
                    className: 'shopcar',
                    labelclassName: 'shopcarLabel',
                    leisureIcon: 'https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/leisure/%E8%B4%AD%E7%89%A9%E8%BD%A6%E6%98%AF%E7%A9%BA%E7%9A%84%402x.png',
                    leisureLabel: '~购物车竟然是空的~',
                    showLeisureBtn: true,
                },
                shopCarList: [''],
                checkAll:false,
            }
        },
        components: {
            BaseMessage,
            BaseLeisure,
            BaseCheckBox
        },
        methods: {
            /**
             * @Description 全选
             * @author Anonymous
             * @date 2019/6/11
             */
            _AllCheck() {
                this.checkAll = !this.checkAll;
                this.foodData.forEach(item => {
                    item.check = this.checkAll;
                });
            },
            /**
             * @Description 选择店铺
             * @author Anonymous
             * @date 2019/6/11
             */
            _checkShop(index) {
                this.foodData[index].check = !this.foodData[index].check;
                this.foodData[index].foods.forEach(item => {
                    item.sonCheck = this.foodData[index].check;
                });
                this._doAllCheck();
            },

            /**
             * @Description 全局消息提示
             * @author Anonymous
             * @date 2019/6/6
             */
            myMessage(message) {
                this.mymessage = message
                this.showmessage = true
                setTimeout(() => {
                    this.mymessage = ''
                    this.showmessage = false
                }, 1500)
            },
        },
        mounted() {
        },
        created() {
        }
    }
</script>
<template>
    <div class="ShopCar">
        <!--购物车列表区域-->
        <div class="shopcar_area">
            <div class="shopCareTop">
                <div class="topleft">
                    <span class="leftLabel">总共6种产品</span>
                    <img class="leftIcon" src="/static/images/session.png" alt="">
                </div>
                <span class="leftLabel">完成</span>
            </div>
            <div class="shopcarListArea">
                <div class="shopCarList" v-for="(items,i) in shopcarlist" :key="i">
                    <div class="shopInfoArea">
                        <img class="selectIcon" src="/static/images/selectIcon.png" alt="">
                        <BaseCheckBox :check="checkAll" @clickBtn="_checkShop(index)"/>
                        <div class="shopInfo">
                            <div class="shopinforight">
                                <img class="shopIcon" :src="items.shoplogo" alt="">
                                <span class="shopname">{{items.shopname}}</span>
                                <img class="goshopicon"
                                     src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/order/fanhui%20%402x.png"
                                     alt="">
                            </div>
                            <span class="shopyouhui">优惠</span>
                        </div>

                    </div>
                    <div class="shopgoodsInfoArea" v-for="(v,j) in items.goodslist" :key="j">
                        <img class="selectIcon" src="/static/images/selectIcon.png" alt="">
                        <div class="goodsInfoarea">
                            <img class="goodsImg"
                                 :src="v.goodsimg"
                                 alt="">
                            <div class="infos">
                                <div class="infosArea">
                                    <span class="goodsname">新鲜水果：{{v.goodsname}}</span>
                                    <span class="goodsprice">￥{{v.goodsprice}}</span>
                                    <span class="pricedes">比加入时降 ¥1.00</span>
                                </div>
                                <div class="buyAccountCtr">
                                    <span class="ctrbtn">-</span>
                                    <span class="accountLabel">{{v.goodsaccount}}</span>
                                    <span class="ctrbtn">+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="activeArea">
                        <div class="activeIcon">
                            <span>本店活动</span>
                        </div>
                        <span class="acitvedes">满50元，享包邮</span>
                    </div>
                </div>
            </div>
            <!--购物底部信息-->
            <div class="shopcarbottom">
                <div class="bottom_left">
<!--                    <img class="leftIcon" src="/static/images/selectIcon.png" alt="">-->
                    <BaseCheckBox :check="checkAll" @clickBtn="_AllCheck"/>
                    <span class="leftIconLabel">全选</span>
                </div>
                <div class="bottom_right">
                    <span>删除</span>
                </div>
            </div>
        </div>
        <!--购物车空的状态区域-->
        <BaseLeisure :LeisureInfo="LeisureInfo" v-if="shopCarList.length == 0"/>
        <!--全局提示消息-->
        <BaseMessage :message="mymessage" v-if="showmessage"/>
    </div>
</template>
<style lang='scss'>
    @import "shopcar";
</style>
